<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
        <script>
            var _leave1 = function () {
                document.getElementById('over1').style.backgroundColor = 'gray';
            };
            var _leave2 = function () {
                document.getElementById('over2').style.backgroundColor = 'black';
            };
            var _out1 = function () {
                document.getElementById('over3').style.backgroundColor = 'gray';
            };
            var _out2 = function () {
                document.getElementById('over4').style.backgroundColor = 'black';
            };
            var _txt6 = function () {
                document.getElementById('txt6').style.backgroundColor = 'black';
            };
            var x=0;
            var _move=function () {
                document.getElementById("demo").textContent = x +=1;
            } ;

            document.onkeypress = function (e) {
                alert(e.code + ":" + e.keyCode);
            };
        window.onload = function () {
                //按钮1 点击事件
                document.getElementById('btn1').onclick = function () {
                    document.getElementById('btn1').textContent = '效果';
                };
                //按钮2 双击事件
                document.getElementById('btn2').ondblclick = function () {
                    document.getElementById('btn2').textContent = '双击事件';
                };
                //窗口事件
                document.body.onresize = function () {
                    alert('onresize事件触发');
                };
                //焦点事件
                document.getElementById('txt1').onfocus = function () {
                    this.value = '得到焦点';
                };
                //失去焦点事件-
                document.getElementById('txt2').onblur = function () {
                    this.value = '失去焦点!';
                };
                //
               // document.getElementById('btn3').onunloand = function (){
                    //alert('关闭？')
               // };
                //鼠标按下去
                document.getElementById('txt3').onmousedown = function () {
                    this.style.backgroundColor = 'red';
                };
                //鼠标松开
                document.getElementById('txt4').onmousedown = function () {
                    this.style.backgroundColor = 'red';
                };
                document.getElementById('txt4').onmouseup = function () {
                    this.style.backgroundColor = 'pink';
                };

               //鼠标悬停与离开
                document.getElementById('txt5').onmouseover = function () {
                    this.style.backgroundColor = 'blue';
                };
                document.getElementById('_fname').onkeyup = function () {
                   document.getElementById('_fname').style.color = 'red';
                   document.getElementById('_fname').style.fontSize = '24px';
                };
                document.getElementById('_fname').onkeydown = function () {
                    document.getElementById('_fname').style.color = 'blue';
                    document.getElementById('_fname').style.fontSize = '24px';
                };
                document.getElementById('_fname').onclick = function () {
                    document.onkeypress = function (e) {
                        alert(e.code + ":" + e.keyCode);
                    };
                };
            };
        </script>
    </head>
    <body >
    <div class="title">事件</div>
    <div style="padding: 10px 20px;">文字描述：JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。</div>
    <div class="case">
        <div class="title">onclick:点击事件</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
            &lt;script&gt;
        　　      window.onload = function () {
      　　　 　       document.getElementById('btn1').<span>onclick</span> = function () {
          　　　　      document.getElementById('btn1').style.textContent = '效果';
      　　　 　　     };
  　　　　        }
            &lt;/script&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id="btn1">按钮</button>
        </div>
    </div>
    <div class="case">
        <div class="title">ondblclick:双击事件</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
             &lt;script&gt;
        　　window.onload = function () {
      　　　 　 document.getElementById('btn2').<span >ondblclick</span> = function () {
          　　　　  document.getElementById('btn2').textContent = '双击事件';
      　　　 　　};
  　　　　  }
        &lt;/script&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id="btn2">按钮</button>
        </div>
    </div>
    <div class="case">
        <div class="title">onresize:窗口事件（会在窗口或框架被调整大小时发生）</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
             &lt;script&gt;
        　　window.onload = function () {
          　　　　   document.body.<span >onresize</span> = function () {
               　  　　alert('onresize事件触发');
          　　　 　　};
  　　　　  }
        &lt;/script&gt;
            </pre>
        </div>
    </div>
    <div class="case">
        <div class="title">onfocus:焦点事件</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
             &lt;script&gt;
        　　window.onload = function () {
          　　　　   document.getElementById('txt1').<span >onfocus</span> = function () {
             　　　　  this.value = '得到焦点';
      　　　 　　    };
  　　　　  }
        &lt;/script&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <input id="txt1" type="text"/>
        </div>
    </div>
    <div class="case">
        <div class="title">onblur:失去焦点事件</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
             &lt;script&gt;
        　　window.onload = function () {
          　　　　   document.getElementById('txt2').<span >onblur</span> = function () {
             　　　　  this.value = '失去焦点';
      　　　 　　    };
  　　　　  }
        &lt;/script&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <input id="txt2" type="text"/>
        </div>
    </div>
    <div class="case">
        <div class="title">onload 事件会在页面或图像加载完成后立即发生。</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
             &lt;script&gt;
        　　window.<span>onload</span> = function () {
  　　　　  }
        </script&gt;
            </pre>
        </div>
    </div>
    <div class="case">
        <div class="title">onunload 事件在用户退出页面时发生。</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
            window.onunload = function (){
                alert('关闭窗口');
            };
            </pre>
        </div>

    </div>
    <div class="case">
        <div class="title">onsubmit	确认按钮被点击</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
            &lt;form name="testform" <span>onsubmit</span>="alert('Hello ' + testform.fname.value +'!')"&gt;
                请输入用户名?
                &lt;input type="text" name="fname" /&gt;
                &lt;input type="submit" value="Submit" /&gt;
            &lt;/form&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <form name="testform" onsubmit="alert('Hello ' + testform.fname.value +'!')">
                请输入用户名?<br />
                <input type="text" name="fname" />
                <input type="submit" value="Submit" />
            </form>
        </div>
    </div>
    <div class="case">
        <div class="title">onreset	重置按钮被点击。</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                当重置按钮被点击时，表单会改为默认值，并显示一个对话框：
            &lt;form <span>onreset</span>="alert('The form will be reset')"&gt;
                &lt;input type="text" name="fname" value="张相杰" /&gt;
                &lt;input type="reset" value="Reset" /&gt;
            &lt;/form&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            当重置按钮被点击时，表单会改为默认值，并显示一个对话框：
            <form onreset="alert('The form will be reset')">
                 <input type="text" name="fname" value="张相杰" />
                <br />
                <input type="reset" value="Reset">

            </form>
        </div>
    </div>
    <div class="case">
        <div class="title">onchange域的内容被改变</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                当重置按钮被点击时，表单会改为默认值，并显示一个对话框：
            &lt;form <span>onreset</span>="alert('The form will be reset')"&gt;
                &lt;input type="text" name="fname" value="张相杰" /&gt;
                &lt;input type="reset" value="Reset" /&gt;
            &lt;/form&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            当重置按钮被点击时，表单会改为默认值，并显示一个对话框：
            <form onreset="alert('The form will be reset')">
                 <input type="text" name="fname" value="张相杰" />
                <br />
                <input type="reset" value="Reset">

            </form>
        </div>
    </div>
    <div class="case">
        <div class="title"> onkeyup某个键盘按键被松开。<br/>
            onkeydown	某个键盘按键被按下
           </div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                document.getElementById('_fname').<span>onkeyup</span> = function () {
                   document.getElementById('_fname').style.color = 'red';
                   document.getElementById('_fname').style.fontSize = '24px';
                };按键被松开时时字体变红且变大
                document.getElementById('_fname').<span>onkeydown</span> = function () {
                    document.getElementById('_fname').style.color = 'blue';
                    document.getElementById('_fname').style.fontSize = '24px';
                };//按键按下时字体变蓝且变大
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <input type="text" id="_fname" value=""/>
        </div>
    </div>
    <div class="case">
        <div class="title"> onkeypress某个键盘按键被按下并松开。。<br/>

           </div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                    document.<span>onkeypress</span> = function (e) {
                        alert(e.code + ":" + e.keyCode);
                    };  //随意按下键盘按键即可查看效果
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <input type="button" id="_fname1" value='按钮'   />
        </div>
    </div>

    <div class="case">
        <div class="title">onmousedown:鼠标按下去</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
             &lt;script&gt;
        　　window.onload = function () {
          　　document.getElementById('txt3').<span>onmousedown</span> = function () {
              　　　  this.style.backgroundColor = 'red';
        　　　　　　};
  　　　　  };
        &lt;/script&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <input id="txt3" type="button" value="button"/>
        </div>
    </div>
    <div class="case">
        <div class="title">onmouseup:鼠标松开</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
             &lt;script&gt;
        　　window.onload = function () {
          　　document.getElementById('txt4').onmousedown = function () {
              　　　  this.style.backgroundColor = 'red';
        　　　};
   　　　　　document.getElementById('txt4').<span class="red">onmouseup</span> = function () {
         　　　　　 this.style.backgroundColor = 'pink';
   　　　　  };
  　　　　  };
        &lt;/script&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <input id="txt4" type="button" value="button"/>
        </div>
    </div>
    <div class="case">
        <div class="title">onmouseover:鼠标悬停和onmouseenter:鼠标进入</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                document.getElementById('txt5').<span>onmouseover</span> = function () {
                                    this.style.backgroundColor = 'blue';
                };　
       　　　　var _txt6 = function () {
                    document.getElementById('txt6').style.backgroundColor = 'black';
                };
                &lt;div id = 'txt5'&gt;
                &lt;/div&gt;
                &lt;div <span>onmouseenter</span>="_txt6()" id="txt6" &gt;
                &lt;/div&gt;

            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <div  id="txt5" style="width: 100px;height: 100px;border: 1px solid #c1bec0;position: relative;"></div>
            <div onmouseenter="_txt6()" id="txt6" style="width: 100px;height: 100px;border: 1px solid #c1bec0;position: relative"></div>
        </div>
    </div>
    <div class="case">
        <div class="title">onmouseout和onmouseleave的区别</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
            var _leave1 = function () {
                document.getElementById('over1').style.backgroundColor = 'gray';
            };//鼠标离开div1时改变背景颜色(onmouseleave)且进入div2时div1的颜色不会改变
            var _leave2 = function () {
                document.getElementById('over2').style.backgroundColor = 'black';
            };//鼠标离开div2时改变背景颜色(onmouseleave)
            var _out1 = function () {
                document.getElementById('over3').style.backgroundColor = 'gray';
            };//鼠标离开div1<span>进入div2</span>时改变背景颜色(onmouseout)
            var _out2 = function () {
                document.getElementById('over4').style.backgroundColor = 'black';
            };//鼠标离开div2时改变背景颜色(onmouseout)
                &lt;div id="over1" <span>onmouseleave</span>="_leave1()"&gt;
                        div1
                    &lt;div id="over2" <span>onmouseleave</span>="_leave2()"&gt;
                            div2
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div id="over3" <span>onmouseout</span>="_out1()"&gt;
                        div1
                    &lt;div id="over4" <span>onmouseout</span>="_out2()"&gt;
                            div2
                    &lt;/div&gt;
                &lt;/div&gt;
            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <div id="over1" onmouseleave="_leave1()" style="width: 200px;height: 200px;border: 1px solid #c1bec0;">div1
                 <div id="over2" onmouseleave="_leave2()" style="width: 100px;height: 100px;border: 1px solid #c1bec0">
                     div2
                 </div>
            </div>
            <div id="over3" onmouseout="_out1()" style="width: 200px;height: 200px;border: 1px solid #c1bec0">div1
                <div id="over4" onmouseout="_out2()" style="width: 100px;height: 100px;border: 1px solid #c1bec0">
                    div2
                </div>
            </div>
        </div>
    </div>
    <div class="case">
        <div class="title">onmousemove:鼠标移动</div>
        <div class="title">代码示例</div>
        <div class="code">
            <pre>
                 var x=0;
            var _move=function () {
                document.getElementById("demo").textContent = x +=1;
            } ;
                &lt;div <span>onmousemove</span>="_move()"&gt;
                    &lt;div id="demo"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

            </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
          <div onmousemove="_move()" style="width: 100px;height: 100px;border: 1px solid #c1bec0;background-color: #9f9f9f">
              <div id="demo" style="width: 50px;height: 50px;margin: 0 auto;background-color: white"></div>
          </div>
        </div>
    </div>
    </body>
</html>